@extends('home.inc.common')
@section('title')
    <title>图库 - 奇异果聚合</title>
    <meta name="keywords" content="{{$cate_info->seo_key}}" />
    <meta name="description" content="{{$cate_info->seo_intro}}" />
    <link href="{{asset('home_new/css/libs.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{asset('home_new/css/global.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{asset('home_new/css/page2.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{asset('home_new/css/qyg2016.css')}}" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="{{asset('home/js/jquery-3.1.0.min.js')}}"></script>
@endsection
@section('content')
    <div class="wrap" style="padding-top:100px;">
        <div id="main">
        @include('home.inc.gallery_category')

        <!--瀑布流-->
            <div class="gallery_box">
                <ul class="recom_list clear"></ul>
                <div>
                    <div class="wrap_go">
                        <a href="javascript:void(0);" id="get_more" data-page="0">加载更多</a>
                    </div>
                </div>
            </div>
            <script type="text/javascript" src="{{asset('home/js/bricks.min.js')}}"></script>
            <script type="text/javascript">

                var sizes = [
                    { columns: 2, gutter: 20 }
                ];

                var p_width = 247 * 2;

                while(p_width < 2480) {
                    p_width = p_width + 247;
                    sizes.push({ mq: p_width + 'px',columns: parseInt(p_width / 247), gutter: 20});
                }

                // create an instance

                var instance = Bricks({
                    container: '.recom_list',
                    packed:    'data-packed',        // if not prefixed with 'data-', it will be added
                    sizes:     sizes
                });

                document.addEventListener('DOMContentLoaded', function (event) {
                    instance
                            .resize(true)     // bind resize handler
                            .pack();           // pack initial items
                });

                var loading = 0;

                var setDisable = function ($this, text) {
                    $this.attr('disabled', true);
                    $this.text(text);
                    loading = layer.load();
                };

                var setEnable = function ($this, text) {
                    $this.attr('disabled', false);
                    $this.text(text);

                    layer.close(loading);
                };

                var loadImages = function (data) {
                    var loaded = [];
                    var count = data.length;
                    data.map(function (item) {
                        var img = new Image();

                        img.src = item.cover + '/220.jpg';

                        img.onerror = img.onload = function () {
                            loaded.push(item);

                            if (loaded.length > 5) {
                                loaded.map(genElement);
                                loaded = [];
                                instance.update();
                            }
                            if (--count === 0) {
                                setEnable(btn, '加载更多');
                                loaded.map(genElement);
                                loaded = [];
                                instance.update();
                            }
                        };
                    });
                };

                var container = $('.recom_list');
                var genElement = function (item) {
                    container.append(
                            '<li class="recom_listItem item masonry_brick" style="margin-right: 20px;">\
                                <a href="{{url('gallery')}}/'+item.id+'.html" target="_blank">\
                                    <img class="listItem_pic" src="'+item.cover+'/220.jpg">\
                                    <p class="listItem_des">\
                                        <span class="listItem_title"> </span>\
                                        '+item.abstract+'\
                                    </p>\
                                    <div class="listItem_info clear">\
                                        <img class="info_photo" src="'+item.head_img+'" width="34" height="34"">\
                                        <span class="info_name">'+item.nickname+'</span>\
                                        <span class="info_like"><img src="/home_new/images/like.png">'+item.visit_count+'</span>\
                                    </div>\
                                </a>\
                            </li>'
                    );
                    return instance.update();
                };

                var btn = $('#get_more');

                var getMore = function () {
                    if (btn.attr('disabled')) return;

                    setDisable(btn, '加载中...');

                    btn.data('page', parseInt(btn.data('page')) + 1);

                    $.getJSON(window.location.href+'?page='+btn.data('page'), function (res) {
                        if (res.data.length) {
                            loadImages(res.data);
                        } else {
                            setDisable(btn, '没有更多了');
                            layer.close(loading);
                            layer.msg('没有更多了');
                        }
                    });
                };

                btn.on('click', getMore);

                getMore();
            </script>
@endsection